<template>
<div>
  <center>
    <h2>融资申请列表</h2>
  </center>

  <el-form ref="form" :model="form" :inline="true" label-width="80px">
    <el-form-item label="申请类型">
      <el-select v-model="form.jrProductType" placeholder="请选择">
        <el-option label="租房分期" value="1"></el-option>
        <el-option label="收房贷" value="2"></el-option>
        <el-option label="应收租约保理" value="3"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="申请状态">
      <el-select v-model="form.applyState" placeholder="请选择">
        <el-option label="申请中" value="1"></el-option>
        <el-option label="初审通过" value="2"></el-option>
        <el-option label="初审不通过" value="3"></el-option>
        <el-option label="复审通过" value="4"></el-option>
        <el-option label="复审不通过" value="5"></el-option>
      </el-select>
    </el-form-item><br>
    <el-form-item label="查询日期">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.startDate" style="width: 80%;"></el-date-picker>
    </el-form-item>
    <el-form-item>
      到 <el-date-picker type="date" placeholder="选择日期" v-model="form.endDate" style="width: 80%;"></el-date-picker>
    </el-form-item>
    <el-form-item >
      <el-button type="primary" @click="list">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      label="申请合同号"
      width="180">
      <template slot-scope="scope">
        {{scope.row.applyOrderNo}}
      </template>
    </el-table-column>
    <el-table-column
      label="贷款信息"
      width="180">
      <template slot-scope="scope">
        {{scope.row.loanMessage}}
      </template>
    </el-table-column>
    <el-table-column
      label="申请类型"
      width="180">
      <template slot-scope="scope">
        <span v-if="scope.row.jrProductType===1">租房分期</span>
        <span v-if="scope.row.jrProductType===2">收房贷</span>
        <span v-if="scope.row.jrProductType===3">应收租约保理</span>
      </template>
    </el-table-column>
    <el-table-column
      label="借款金额"
      width="180">
      <template slot-scope="scope">
        {{scope.row.loanAmount}}元
      </template>
    </el-table-column>
    <el-table-column
      label="借款期限"
      width="180">
      <template slot-scope="scope">
        {{scope.row.monthLimit}}月
      </template>
    </el-table-column>
    <el-table-column
      label="申请日期"
      width="180">
      <template slot-scope="scope">
        {{scope.row.createTime}}
      </template>
    </el-table-column>
    <el-table-column
      label="资金方"
      width="180">
      <template slot-scope="scope">
        {{scope.row.companyName}}
      </template>
    </el-table-column>
    <el-table-column
      label="申请状态"
      width="180">
      <template slot-scope="scope">
        <span v-if="scope.row.applyState===1">申请中</span>
        <span v-if="scope.row.applyState===2">初审通过</span>
        <span v-if="scope.row.applyState===3">初审不通过</span>
        <span v-if="scope.row.applyState===4">复审通过</span>
        <span v-if="scope.row.applyState===5">复审不通过</span>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
       <span v-if="scope.row.applyState===1">
            <el-button
              type="text"
              plain
              icon="el-icon-edit"
              size="mini"
              @click="goUpdateStatus(scope.row)"
            >审核</el-button>
          </span>
        <span v-if="scope.row.applyState===2">
            <el-button
              type="text"
              plain
              icon="el-icon-edit"
              size="mini"
              @click="goUpdateStatus(scope.row)"
            >复审</el-button>
          </span>
        <span v-if="scope.row.applyState===3">
            <el-button
              type="text"
              plain
              icon="el-icon-edit"
              size="mini"
              @click="get()"
            >查看</el-button>
          </span>
        <span v-if="scope.row.applyState===5">
            <el-button
              type="text"
              plain
              icon="el-icon-edit"
              size="mini"
              @click="get(scope.row)"
            >查看</el-button>
          </span>
        <span v-if="scope.row.applyState===4">
            <el-button
              type="text"
              plain
              icon="el-icon-edit"
              size="mini"
              @click="get(scope.row)"
            >查看</el-button>
          </span>
      </template>
    </el-table-column>
  </el-table>
  <pagination
    v-show="total>0"
    :total="total"
    :page.sync="form.pageNum"
    :limit.sync="form.pageSize"
    @pagination="list"
  />




  <el-dialog title="对话框" :visible.sync="dialogFormVisible">
    <el-form :model="diaForm">
      <el-form-item label="活动名称" >
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>



</div>
</template>

<script>
import {searchRentInstall} from "@/views/jingrong/jinrong";
export default {
  name: "index",
  data(){
    return{
      form:{
        pageSize:5,
        pageNum:1,
      },
      tableData:[],
      total:0,
      dialogFormVisible:false,
      diaForm:{}
    }
  },
  created() {
    console.log("=======================")
    this.list();
    console.log("=======================")
  },methods:{
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    list(){
      searchRentInstall(this.form).then(res=>{
        console.log(res)
        this.tableData=res.list
        this.total=res.total
      })
    },
    get(){

    }

  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: #6e5932;
}

.el-table .success-row {
  background: #e34242;
}
</style>
